<template>
  <a-card>
    <a-form layout="inline" :model="formState">
      <a-form-item label="资料名称">
        <a-input v-model:value="formState.resourceName" placeholder="请输入" class="item-content" />
      </a-form-item>
      <a-form-item label="创建时间">
        <a-date-picker
          v-model:value="formState.createTime"
          type="date"
          placeholder="请选择"
          class="item-content"
          style="width: 120px"
        />
      </a-form-item>
      <a-form-item label="创建人">
        <a-input v-model:value="formState.creator" placeholder="请输入" class="item-content" />
      </a-form-item>
      <a-form-item>
        <a-button style="color: white; background-color: #f50" @click="query">查询</a-button>
        <a-button style="margin-left: 10px; background-color: #ececec" @click="reset"
          >重置</a-button
        >
      </a-form-item>
    </a-form>

    <dynamic-table
      ref="tableRef"
      :row-key="(record) => record.serial"
      :dynamic-columns="columns"
      :get-list-func="getSharingData"
    >
      <template #title>
        <segment
          style="margin: 0 20px 0 10px"
          :list="resourceTypeList"
          @click="handleResourceTypeClick"
        ></segment>
        <div style="width: 115px">
          <a-button block type="primary" @click="addItem"> 新增 </a-button>
        </div>
      </template>
      <template #resourceType="{ record }">
        <span class="resource-type">
          {{ record.resourceType }}
        </span>
      </template>
    </dynamic-table>
  </a-card>
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs, ref, toRaw, UnwrapRef } from 'vue'
  import { DynamicTable } from '@/components/dynamic-table'
  import {
    columns,
    convertResourceTypeChinese2Code,
    convertResourceTypeCode2Chinese
  } from './index.data'
  import { Button, Card, Form, Input, Select, DatePicker } from 'ant-design-vue'
  import { Dayjs } from 'dayjs'
  import { formatDate } from '@/utils/common'
  import Segment from '@/views/resource/sharing/Segment.vue'
  import { useRouter } from 'vue-router'
  import { useResourceStore } from '@/store/modules/resource'

  interface FormState {
    creator: string
    resourceName: string
    resourceType: string
    createTime: Dayjs | string | undefined
  }
  export default defineComponent({
    name: 'Sharing',
    components: {
      DynamicTable,
      Segment,
      [Card.name]: Card,
      [Button.name]: Button,
      [Form.name]: Form,
      [Form.Item.name]: Form.Item,
      [Input.name]: Input,
      [Select.name]: Select,
      [DatePicker.name]: DatePicker
    },
    setup() {
      const resource = useResourceStore()

      const formState: UnwrapRef<FormState> = reactive({
        creator: '',
        resourceName: '',
        resourceType: '',
        createTime: ''
      })
      const initialFormState = Object.assign({}, toRaw(formState))
      const query = () => {
        tableRef.value.refreshTableData(formState)
      }
      const reset = () => {
        Object.assign(formState, initialFormState)
      }

      const router = useRouter()

      const tableRef = ref<any>(null)
      const state = reactive({
        tableLoading: false,
        resourceTypeList: ['报表共享', '填报说明', '制度通知', '其他事项']
      })

      const getSharingData = (params) => {
        console.log(params)
        interface DataItem {
          serial: number
          resourceName: string
          createTime: string | null
          creator: string
          resourceType: string
          url: string
          resourceId: string
        }
        return new Promise((resolve, reject) => {
          resource
            .getSharingList({
              pageSize: params.pageSize,
              currentPage: params.pageNumber,
              resourceUser: '',
              cTime: formatDate(formState.createTime),
              resourceName: formState.resourceName,
              resourceType: convertResourceTypeChinese2Code(formState.resourceType)
            })
            .then((res) => {
              console.log(res)
              const data: DataItem[] = []
              for (let i = 0; i < res.data?.length; i++) {
                const obj: DataItem = {
                  serial: i,
                  url: res.data[i].filePath,
                  resourceId: res.data[i].resourceId,
                  resourceName: res.data[i].resourceName,
                  creator: res.data[i].resourceUserName,
                  resourceType: convertResourceTypeCode2Chinese(res.data[i].resourceType),
                  createTime: formatDate(res.data[i].ctime)
                }
                data.push(obj)
              }

              resolve({
                data: data,
                pageNumber: res.currentPage,
                pageSize: res.pageSize,
                total: res.totalRows
              })
            })
            .catch((error) => reject(error))
        })
      }

      const addItem = () => {
        router.push('/resource/add')
      }

      const handleResourceTypeClick = (item) => {
        formState.resourceType = item
        tableRef.value.refreshTableData(formState)
      }

      return {
        ...toRefs(state),
        columns,
        tableRef,
        handleResourceTypeClick,
        getSharingData,
        formState,
        query,
        addItem,
        reset
      }
    }
  })
</script>

<style lang="scss" scoped>
  .item-content {
    width: 100px;
    margin-bottom: 20px;
  }

  .resource-type {
    padding: 2px 5px;
    color: white;
    background-color: #ff7d0c;
    border-radius: 2px;
  }
</style>
